<template>
  <div class="space-y">
    <h2>购物车</h2>
    <div v-if="items.length===0" class="card" style="padding:16px;">购物车为空</div>
    <div v-else class="card" style="padding:12px;">
      <div class="row" style="justify-content:space-between;margin-bottom:12px;">
        <div>商品列表</div>
        <button class="btn ghost" @click="clearCart" style="color:#ef4444;">清空购物车</button>
      </div>
      <div v-for="(it,idx) in items" :key="idx" class="row" style="justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);">
        <div class="row" style="flex:1;justify-content:space-between;">
          <div>{{ it.name }}</div>
          <div class="price">¥ {{ it.price }}</div>
        </div>
        <div class="row">
          <button class="btn ghost" @click="decrement(idx)">-</button>
          <span>{{ it.quantity }}</span>
          <button class="btn" @click="increment(idx)">+</button>
        </div>
      </div>
      <div class="row" style="justify-content:space-between;margin-top:12px;">
        <div>总价：</div>
        <div class="price">¥ {{ total }}</div>
      </div>
    </div>
    <div class="card" style="padding:16px;">
      <div class="row" style="gap:10px;">
        <input class="input" placeholder="收货地址" v-model="address" />
        <input class="input" placeholder="联系电话" v-model="phone" style="max-width:200px;" />
        <button class="btn" @click="submitOrder">提交订单</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data(){ return { items:[], address:'', phone:'' } },
  computed:{
    total(){ return this.items.reduce((s,i)=> s + Number(i.price)*i.quantity, 0).toFixed(2) }
  },
  created(){
    this.items = JSON.parse(localStorage.getItem('cart')||'[]')
    // 自动填充用户电话号码
    const user = JSON.parse(localStorage.getItem('user')||'null')
    if(user && user.phone){
      this.phone = user.phone
    }
  },
  methods:{
    increment(i){ this.items[i].quantity++; this.sync() },
    decrement(i){ if(this.items[i].quantity>1){ this.items[i].quantity-- } else { this.items.splice(i,1) } this.sync() },
    sync(){ localStorage.setItem('cart', JSON.stringify(this.items)) },
    clearCart() {
      if(confirm('确定要清空购物车吗？')) {
        localStorage.removeItem('cart')
        this.items = []
        alert('购物车已清空')
      }
    },
    async submitOrder(){
      if(this.items.length===0) return
      if(!this.address.trim()){ alert('地址不可为空'); return }
      if(!this.phone.trim()){ alert('联系电话不可为空'); return }
      const user = JSON.parse(localStorage.getItem('user')||'null')
      if(!user){ alert('请先登录'); location.hash = '#/login'; return }
      const restaurantId = this.items[0].restaurantId
      const body = { userId:user.id, restaurantId, deliveryAddress:this.address, contactPhone:this.phone, items: this.items.map(i=>({ menuItemId:i.menuItemId, quantity:i.quantity, price:i.price })) }
      const res = await fetch('/api/v1/orders', { method:'POST', headers:{'Content-Type':'application/json'}, body: JSON.stringify(body) })
      if(res.ok){
        localStorage.removeItem('cart')
        alert('下单成功')
        location.hash = '#/orders'
      }
    }
  }
}
</script>


